<script setup lang="ts">
import type { ModelSetting } from '@/services/model/type'
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { QuestionCircle20Regular } from '@vicons/fluent'
import { Icon } from '@vicons/utils'
import { useModelStore } from '@/stores/model'

const { t } = useI18n()

// 模型存储
const modelStore = useModelStore()

// 外部参数
// const props = defineProps({
//   // 是否手机模式
//   isMobile: {
//     type: Boolean,
//     required: true,
//   },
// })

// 设置参数
const setting = ref<ModelSetting>()

// 关闭面板：保存数据
const onClose = () => {
  modelStore.setModelSetting(setting.value)
}

// 进入面板：加载数据
onMounted(() => {
  setting.value = modelStore.getModelSetting()
})

defineExpose({
  onClose,
})
</script>

<template>
  <div>
    <n-list v-if="setting" bordered>
      <n-list-item>
        <n-thing>
          <template #description>
            <a-tooltip trigger="hover" placement="topLeft">
              <div class="cursor-help flex items-center">
                <span>{{ t('setting.prompt.promptTitle') }}</span>
                <Icon class="ml-1"><QuestionCircle20Regular /></Icon>
              </div>
              <template #title>
                {{ t('setting.prompt.promptTip') }}
              </template>
            </a-tooltip>
            <n-input
              class="mt-3"
              v-model:value="setting.prompt"
              type="textarea"
              rows="6"
              :placeholder="t('setting.prompt.promptPlaceholder')"
            />
          </template>
        </n-thing>
      </n-list-item>
      <n-list-item>
        <n-thing>
          <template #description>
            <div class="flex justify-between">
              <a-tooltip trigger="hover" placement="topLeft">
                <div class="cursor-help flex items-center">
                  <span>{{ t('setting.prompt.temperatureTitle') }}</span>
                  <Icon class="ml-1"><QuestionCircle20Regular /></Icon>
                </div>
                <template #title>
                  {{ t('setting.prompt.temperatureTips') }}
                </template>
              </a-tooltip>
              <div class="flex items-center w-[200px]">
                <n-slider
                  v-model:value="setting.temperature"
                  :tooltip="false"
                  :min="0"
                  :max="1"
                  :step="0.1"
                />
                <span class="ml-3">{{ setting.temperature }}</span>
              </div>
            </div>
          </template>
        </n-thing>
      </n-list-item>
      <!-- <n-list-item>
        <n-thing>
          <template #description>
            <div class="flex justify-between">
              <a-tooltip trigger="hover" placement="topLeft">
                <div class="cursor-help flex items-center">
                  <span>上下文长度</span>
                  <Icon class="ml-1"><QuestionCircle20Regular /></Icon>
                </div>
                <template #title> 每个对话的上下文长度，数值越大消耗的 Token 也越多。 </template>
              </a-tooltip>
              <div class="w-[120px]">
                <n-input-number v-model:value="setting.contextLength" />
              </div>
            </div>
          </template>
        </n-thing>
      </n-list-item> -->
      <n-list-item>
        <n-thing>
          <template #description>
            <div class="flex justify-between">
              <div class="flex items-center h-[34px]">
                <a-tooltip trigger="hover" placement="topLeft">
                  <div class="cursor-help flex items-center">
                    <span>{{ t('setting.prompt.limitMaxTokensTitle') }}</span>
                    <Icon class="ml-1"><QuestionCircle20Regular /></Icon>
                  </div>
                  <template #title>
                    {{ t('setting.prompt.limitMaxTokensTips') }}
                  </template>
                </a-tooltip>
                <n-switch
                  class="ml-3"
                  v-model:value="setting.limitMaxTokens"
                  size="small"
                ></n-switch>
              </div>
              <div v-if="setting.limitMaxTokens" class="w-[120px]">
                <n-input-number v-model:value="setting.maxTokens" />
              </div>
            </div>
          </template>
        </n-thing>
      </n-list-item>
    </n-list>
  </div>
</template>

<style lang="scss" scoped>
.model-named {
  display: flex;
  justify-content: space-between;
  .select {
    flex: 1;
    max-width: 400px;
  }
  &.mobile {
    flex-direction: column;
    .select {
      width: 100%;
      margin-top: 12px;
    }
  }
}
</style>
